<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>用户管理</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="/css/bootstrap.min.css">
		<link rel="stylesheet" href="/css/font-awesome.min.css">
		<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
		<script src="/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
			<a class="navbar-brand" href="#">
				<img src="/img/logo.png" height="30" class="d-inline-block align-top" alt="">
				Mall电商运营平台
			</a>
			<ul class="navbar-nav mr-auto">
				<li class="nav-item">
					<a class="nav-link" href="/product/DataView">数据看板</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="/product/List">商品维护</a>
				</li>
				<li class="nav-item">
					<a class="nav-link active" href="/user/List">会员管理</a>
				</li>
			</ul>
			<span class="navbar-text">
				<a class="nav-link " th:href="@{/adminInfo(name=${userName})}">
					<i class="fa fa-user"></i>
					个人中心[<span th:text="${userName}"></span>]</a>
			</span>
		</nav>
		<div class="container-fluid" style="margin-top: 100px;">
			<!-- 看板 -->
			<div class="row">
				<div class="col-md-1"></div>
				<div class="col-md-10">
					<div class="row">
						<div class="col-md-5">
							<div class="card">
								<div class="card-header bg-light text-center">
									用户占比分析
								</div>
								<div class="card-body">
									<div class="ibox float-e-margins">
										<div class="ibox-title">
											<h5><span style="font-size: 16px;" class="label label-success">用户来源分布</span>
											</h5>
										</div>
										<div class="ibox-content">
											<div class="echarts" id="userAddressPie" style="height: 300px;"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-7">
							<div class="card">
								<div class="card-header bg-light text-center">
									用户占比分析
								</div>
								<div class="card-body">
									<div class="ibox float-e-margins">
										<div class="ibox-title">
											<h5><span style="font-size: 16px;"
													class="label label-success">用户访问量趋势</span></h5>
										</div>
										<div class="ibox-content">
											<div id='lineChart' style="height:300px;"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-1"></div>
			</div>
			<!-- 按钮组 -->
			<div class="row" style="margin-top: 20px;">
				<div class="col-md-1"></div>
				<div class="col-md-10">
					<a href="javascript:void(0);" onclick="batchDelete()" class="btn btn-sm btn-outline-danger"><i class="fa fa-trash-o"></i> 批删除</a>
					<a href="/user/AddUser" class="btn btn-outline-success btn-sm"><i class="fa fa-user-plus"></i> 添加</a>
					<a href="/exportUser" class="btn btn-outline-success btn-sm"><i class="fa fa-file-excel-o"></i> 导出</a>
				</div>
				<div class="col-md-1"></div>
			</div>
			<div class="row">
				<div class="col-md-1"></div>
				<div class="col-md-10">
					<table class="table table-bordered table-hover">
						<thead>
							<tr class="bg-light">
								<th><input type="checkbox" name="id" id="id"></th>
								<th>用户名</th>
								<th>年龄</th>
								<th>手机</th>
								<th>邮箱</th>
								<th>地址</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
						<tr th:each="userItem : ${userItemList}">
							<td>
								<input type="checkbox" name="selectedProducts" class="item-checkbox" th:value="${userItem.id}">
							</td>
							<td th:text="${userItem.username}"/>
							<td th:text="${userItem.age}"/>
							<td th:text="${userItem.mobile}"/>
							<td th:text="${userItem.email}"/>
							<td th:text="${userItem.address}"/>
								<td>
									<a class="btn btn-sm btn-outline-danger" href="#" th:href="@{/delete(id=${userItem.id})}"><i class="fa fa-trash-o"></i>删除</a>
									<input type="hidden" id="userId_${userItem.index}" th:value="${userItem.id}" />
									<a class="btn btn-sm btn-outline-info" href="#" th:href="@{/editUser(id=${userItem.id})}"><i class="fa fa-edit"></i>编辑</a>
									<a class="btn btn-sm btn-outline-success" href="#" th:href="@{/info(id=${userItem.id})}"><i class="fa fa-info"></i>查看</a>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="col-md-1"></div>
			</div>
			<div class="row">
				<div class="col-md-3"></div>
				<div class="col-md-6" style="text-align: center">
					<!-- 检查当前页码是否大于1，小于等于总页数 -->
					<a class="btn btn-outline-primary" th:if="${currentPage > 1}" th:href="@{/user/List(pageNum=${currentPage - 1})}">上一页</a>
					<!-- 检查当前页码是否小于总页数 -->
					<a class="btn btn-outline-primary" th:if="${currentPage < pages}" th:href="@{/user/List(pageNum=${currentPage + 1})}">下一页</a>
				</div>
				<div class="col-md-3"></div>
			</div>
		</div>
	</body>
	<script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/echarts.min.js" type=""></script><br />
	<script>
		function batchDelete() {
			// 获取所有选中的复选框
			var selectedCheckboxes = document.getElementsByName('selectedProducts');
			var selectedIds = [];
			// 遍历复选框，收集选中的ID
			for (var i = 0; i < selectedCheckboxes.length; i++) {
				if (selectedCheckboxes[i].checked) {
					selectedIds.push(selectedCheckboxes[i].value);
				}
			}
			// 将收集到的ID数组转换为字符串
			var idsParam = selectedIds.join(',');
			// 发送请求
			fetch('/deleteUserBatch?ids=' + encodeURIComponent(idsParam), {
				method: 'DELETE',
			})
					.then(response => {
						if (!response.ok) {
							throw new Error('');
						}
						alert('批量删除成功!');
						window.location.reload();
					})
					.catch(error => {
						alert('批量删除失败，请重试!');
					});
		}
	</script>
	<script>
		/*用户来源分布图*/
		$(function() {
			var pieChart = echarts.init(document.getElementById("userAddressPie"));
			fetch('/api/userSources')
					.then(response => response.json())
					.then(data => {
						var pieoption = {
							title: {
								text: '',
								x: 'center'
							},
							tooltip: {
								trigger: 'item',
								formatter: "{a} <br/>{b} : {c} ({d}%)"
							},
							legend: {
								orient: 'vertical',
								x: 'left',
								data: data.legendData
							},
							calculable: true,
							series: [{
								name: '支付平台',
								type: 'pie',
								radius: '55%',
								center: ['50%', '60%'],
								data: data.data
							}]
						};
						pieChart.setOption(pieoption);
					})
			/* 折线图 */
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('lineChart'));

			fetch('/api/weeklyVisitData')
					.then(response => {
						if (!response.ok) {
							throw new Error('');
						}
						return response.json();
					})
					.then(data => {
						const dates = data.map(item => item.visitTime);
						const visits = data.map(item => item.visits);

						// 更新ECharts配置
						option = {
							title: {
								text: '',
							},
							tooltip: {
								trigger: 'axis'
							},
							legend: {
								data: ['用户访问趋势']
							},
							toolbox: {
								show: true,
							},
							xAxis: {
								type: 'category',
								boundaryGap: false,
								data: dates
							},
							yAxis: {
								type: 'value',
								axisLabel: {
									formatter: '{value} 次'
								}
							},
							series: [
								{
									name: '用户访问趋势',
									type: 'line',
									areaStyle: {
										normal: {}
									},
									data: visits,
									markPoint: {
										data: [{
											name: '周最低',
											value: visits.reduce((a, b) => Math.min(a, b), Infinity),
											xAxis: dates.indexOf(minDate(visits)),
											yAxis: 0
										}]
									},
									markLine: {
										data: [{
											type: 'average',
											name: '平均值'
										},
											[{
												symbol: 'none',
												x: '90%',
												yAxis: 'max'
											}, {
												symbol: 'circle',
												label: {
													normal: {
														position: 'start',
														formatter: '最大值'
													}
												},
												type: 'max',
												name: '最高点'
											}]
										]
									}
								}
							]
						};

						// 显示图表
						myChart.setOption(option);
					})
					.catch(error => {
						console.error('Error fetching data:', error);
					});
		});
         // 寻找访问量的最小日期
			function minDate(values) {
				return values.reduce((minIndex, val, index) => val === Math.min(...values) ? index : minIndex, 0);
			}

	</script>
</html>
